<template>
    <div id="main">
        <img src="@/assets/image/logo@3x.png" alt="" />
        <input type="text" placeholder="请扫描或输入UDI" @click="goToSeach" />
        <img src="@/assets/image/scanning@3x.png" alt="" />
        <!-- <img style="width: 100px; height: 100px" :src="pic" alt="" /> -->
    </div>
</template>

<script>
import { defineComponent, onMounted, ref, reactive, readonly, toRefs } from 'vue'
import { useRouter } from 'vue-router'

export default defineComponent({
    name: 'Search',
    props: ['searchPath'],
    setup(props) {
        // const data = reactive({
        //     pic: require(`C:/Users/3854/Pictures/Saved Pictures/v2-0c566de37c1f1468e360b5942c39b269_1440w.jpg`)
        // })
        const router = useRouter()
        const nextPath = ref(null)
        const path = readonly(props.searchPath)
        // 跳转至详情搜索页
        const goToSeach = () => {
            if (path === '流向查询') {
                router.push('flow')
            } else if (path === '真伪鉴别') {
                router.push('identify')
            }
        }
        onMounted(() => {
            console.log('接收参数p', props.searchPath)
        })
        return {
            path,
            nextPath,
            goToSeach
            // ...toRefs(data)
        }
    }
})
</script>

<style scoped lang="scss">
#main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 40px;

    > img:first-child {
        width: 120px;
        height: 56px;
        margin-top: 220px;
    }

    input {
        width: 100%;
        height: 40px;
        padding: 0 20px;
        margin: 40px 0;
        color: #dfdfdf;
        background-color: #ebeef2;
        border: 1px solid #dfdfdf;
        border-radius: 12px;
        outline: none;
    }

    > img:nth-of-type(2) {
        position: absolute;
        top: 335px;
        right: 40px;
        width: 20px;
        height: 20px;
    }
}
</style>
